<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 300px;
        height: 200px;
        border: 1px solid #666;
        margin: auto;
        margin-top: 10em;
    }

    #p {
        display: flex;
        justify-content: center;
        /* align-items: center; */
        line-height: 200px;
    }

    .choose {
        width: 300px;
        /* border: 1px solid #666; */
        margin: auto;
        margin-top: 1em;
        display: flex;
        justify-content: space-around;
    }
</style>

<body>
    <div class="box">
        <p id="p"></p>
    </div>

    <div class="choose">
        <input type="button" value="start">
        <input type="button" value="end">
    </div>

    <script>
        let p = document.querySelector('p');
        let nameStr = `余秋雨,文章,曾诚,高茂卜,孙建峰,唐明,黄宇,肖玉林,简帮炜,曾薪月,侯芹,田浩民,梁超栋,彭浩峰,李嘉林,房俊霖,马玉琨`;
        let newname = nameStr.split(',');
        let num = newname.length - 1;
        let stopBtn = document.querySelector("[value='stop']");
        let startBtn = document.querySelector("[value='start']");

        function foo() {
            p.innerText = newname[random(num)];
        }
        let timer = null;

        //停止按钮
        stopBtn.oncilck= function (){
            clearInterval(timer);
        }
        //开始
        startBtn.oncilck= function (){
            timer = setInterval(foo,100)
        }

        // 随机数装封
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            let number = parseInt(Math.random(min, max) * (max - min + 1) + min);
            return number;
        }
    </script>


</body>

</html>